<script setup>
import {onMounted, reactive, ref, watch, watchEffect} from "vue";
import {getWorkDetailsAPi,updateScoreAPi} from '@/api/user'
import {ElButton, ElMessage} from "element-plus";
import {useRoute} from "vue-router";
//引入VueOfficeDocx组件
import {VueOfficeDocx} from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import {computed} from "vue-demi";

const route=useRoute()
// 控制Dialog对话框的显示隐藏
const videoDialogVisible = ref(false)
//评价输入框
const textarea = ref('')
const score=reactive({
})
//文件渲染
//
//true是docx  false是pdf
const LessonPlanImgShowPdf=ref(false);
const LessonPlanImgShowDocx=ref(false);
const LessonPlanImgShowXlsx=ref(false);
onMounted(()=>{
  if (showType(LessonPlanFileName)===1){
    LessonPlanImgShowPdf.value=true;
  }else if(showType(LessonPlanFileName)===2){
    LessonPlanImgShowDocx.value=true;
  }else {
    LessonPlanImgShowXlsx.value=true;
  }
})
function showType(fileName){
  const type=fileName.value.split('.')
  if (type[type.length-1]==='pdf'){
    return 1;
  }else if(type[type.length-1]==='docx') {
    return 2;
  }else if(type[type.length-1]==='xlsx') {
    return 3;
  }
}
const showFiles = ref(false)
const handleClick = () => {
  showFiles.value = true
}
const LessonPlanFileName=ref('时尚线条简历模板.docx');

let workId=route.query.id
const userId=route.query.userId
const workIdList=JSON.parse(route.query.idList)
const id=ref()
let detailsData=ref({})
const handleSearchDetail=async (workId) => {
 await getWorkDetailsAPi({
    id: workId
  }).then((res) => {
    if(res.code===200)
    {
      detailsData.value = res.data
      id.value=detailsData.value.id
    }

  }).catch(() => {
    detailsData= {}
    ElMessage.error("查询失败")
  })
}
handleSearchDetail(workId)
const tableData=ref({
  /**
   * 文件id
   */
   id:0,

  /**
   * 作品名称
   */
  workName:"",



  /**
   * 课堂实录
   */
  classroomRecording:"",

  /**
   * 教案
   */
   lessonPlan:"",

  /**
   * 教学实施报告
   */
  teachingReport:"",

  /**
   * 专业人才培养方案
   */
   talentDevelopmentPlan:"",

  /**
   * 课程标准
   */
   courseStandard:"",

  /**
   * 教材选用说明
   */
   textbookSelectionNote:"",


  /**
   * 评审意见
   */
   comments:"",

  /**
   * 作品分组
   */
   workTeam:""


})
const scoresData=ref({})
const videoData=ref([])

/**
 * 重新加载数据
 * @param detailsData
 */
const loadTableData=(detailsData)=>{
  tableData.value={
    ...detailsData
  }
  scoresData.value={
    ...tableData.value.scoreVO
  }
  textarea.value=tableData.value.comments
}
/**
 * 取出文件名
 * @param url
 * @returns {string}
 */
const splitStringAfter=(url)=>{
  if (typeof url === 'string'){
    const splitIndex = url.lastIndexOf(':');
    return url.substring(splitIndex + 1)
  }else{
  }
}
/**
 * 取出文件地址
 */
const splitUrlBefore=(url)=>{
  if (typeof url === 'string') {
    // 使用 indexOf 寻找第一个冒号的位置
    const firstColonIndex = url.indexOf(':');
    // 使用 indexOf 寻找第二个冒号的位置
    const secondColonIndex = url.indexOf(':', firstColonIndex + 1);
    // 提取第二个冒号前的网址部分
    const extractedUrl = url.substring(0, secondColonIndex);
    return extractedUrl
    // 继续处理 parts
  } else {
  }
}

const getFileUrl=(url)=>{
  const fileUrl="https:"+url.split(':')[1]
  console.log(fileUrl)
  return fileUrl
}

const getFileName=(url)=>{
  console.log(url)
  const fileName=url.split(':')[2]
  console.log(fileName)
  return fileName
}

/**
 * 教学实施报告
 */
const score1 = ref('');
/**
 * 教案
 */
const score2 = ref('');
/**
 * 视频资料
 */
const score3 = ref('');
/**
 * 专业人才培养方案
 */
const score4 = ref('');
/**
 * 课程标准
 */
const score5 = ref('');
/**
 * 教材选用说明
 */
const score6 = ref('');
// 使用 computed 来计算总分数，确保不超过100
const totalScore = computed(() => {
  // 将空字符串转换为0，确保计算总分数的时候不会出错
  const s1 = parseInt(score1.value) || 0;
  const s2 = parseInt(score2.value) || 0;
  const s3 = parseInt(score3.value) || 0;
  const s4 = parseInt(score4.value) || 0;
  const s5 = parseInt(score5.value) || 0;
  const s6 = parseInt(score6.value) || 0;
  return (Math.min(100, s1 + s2 + s3 + s4 + s5 + s6)||'');
});
// 模拟从后台获取数据的操作
// 在这个例子中，假设从后台获取的数据中可能包含空值
// 你可以根据实际情况修改这部分逻辑
const fetchDataFromBackend = () => {
  // 更新分数变量
  score1.value = scoresData.value.teachingReport !== null ? scoresData.value.teachingReport : '';
  score2.value = scoresData.value.lessonPlan!== null ?scoresData.value.lessonPlan : '';
  score3.value = scoresData.value.classroomRecording !== null ? scoresData.value.classroomRecording : '';
  score4.value = scoresData.value.talentDevelopmentPlan !== null ? scoresData.value.talentDevelopmentPlan : '';
  score5.value = scoresData.value.courseStandard !== null ? scoresData.value.courseStandard: '';
  score6.value = scoresData.value. textbookSelectionNote !== null ? scoresData.value. textbookSelectionNote: '';
  // totalScore.value=scoresData.value.comprehensiveScore !== null ? scoresData.value.comprehensiveScore : '';
};
const updateTotalScore = () => {
  // 当任一分数输入框发生变化时，触发计算总分
  // 这里的 input 事件触发时会更新 totalScore 的值
  totalScore.value; // 触发计算
  score.value = {
    entriesId:id.value,
    classroomRecording:score3.value,
    lessonPlan:score2.value,
    teachingReport:score1.value,
    talentDevelopmentPlan:score4.value,
    courseStandard:score5.value,
    textbookSelectionNote:score6.value,
    comprehensiveScore:totalScore.value
  }

};

function handleInput1(){
  const v1=score1.value;
  if (parseInt(v1,10)<0||parseInt(v1,10)>20||v1===''||isNaN(parseInt(v1,10))){
    ElMessage.warning("请规范打分")
    score1.value=''
  }
}
function handleInput2(){
  const v2=score2.value;
  if (parseInt(v2,10)<0||parseInt(v2,10)>20||v2===''||isNaN(parseInt(v2,10))){
    ElMessage.warning("请规范打分")
    score2.value=''
  }
}
function handleInput3(){
  const v3=score3.value;
  if (parseInt(v3,10)<0||parseInt(v3,10)>40||v3===''||isNaN(parseInt(v3,10))){
    ElMessage.warning("请规范打分")
    score3.value=''
  }
}
function handleInput4(){
  const v4=score4.value;
  if (parseInt(v4,10)<0||parseInt(v4,10)>8||v4===''||isNaN(parseInt(v4,10))){
    ElMessage.warning("请规范打分")
    score4.value=''
  }
}
function handleInput5(){
  const v5=score5.value;
  if (parseInt(v5,10)<0||parseInt(v5,10)>8||v5===''||isNaN(parseInt(v5,10))){
    ElMessage.warning("请规范打分")
    score5.value=''
  }
}
function handleInput6(){
  const v6=score6.value;
  if (parseInt(v6,10)<0||parseInt(v6,10)>4||v6===''||isNaN(parseInt(v6,10))){
    ElMessage.warning("请规范打分")
    score6.value=''
  }
}

/**
 * 监听detailsData
 */
watch(detailsData,(newData) => {
  // 在 detailsData 变化时执行相关操作
    loadTableData(detailsData.value);
    videoData.value=JSON.parse(tableData.value.classroomRecording)
    fetchDataFromBackend()
});
const videosData=ref([])
watch(videoData,(newData)=>{

    for (let i = 0; i < newData.length; i++) {
      const newUrl=splitUrlBefore(newData[i])
      videosData.value.push(newUrl)
    }

},{deep:true})

/**
 * 保存
 */
const save=()=>{
  console.log(score.value)
  updateScoreAPi(
      id.value,
      workId,
      userId,
      score.value,
      textarea.value
  ).then((res)=>{
    if(res.code===200){
      ElMessage.success("保存成功")
    }
  }).catch((err)=>{

  })
}

function fixed(){
  window.scrollTo({
    // top: document.documentElement.offsetHeight, //回到底部
    top: document.documentElement.offsetHeight, //回到顶部
    left: 0,
    behavior: "auto", //smooth 平滑；auto:瞬间
  })

}

//判断文件名后缀
const docxOrPdf=(url)=>{
  if (typeof url !== 'string'){
    return
  }
  const after=splitStringAfter(url).split('.');
  if (after[after.length-1]==='docx'){
    return true;
  }else {
    return false;
  }
}


function downloadFile(url) {
  // 替换为你的文件URL
  const link = document.createElement('a');
  link.href = url;
  link.setAttribute('download', '');
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}
const videosrc=ref('')
const videoPlay=(VideoSrc)=> {
  videoDialogVisible.value = true
  videosrc.value = VideoSrc
}
const splitString=(url)=> {
  if (typeof url !== 'string') {
    return
  }
  const startIndex = url.indexOf(":", url.indexOf(":") + 1); // 查找第二个冒号的索引
  const endIndex = url.indexOf(".", startIndex); // 查找点的索引
 return url.substring(startIndex + 1, endIndex); // 使用 substring() 方法
}
/**
 * 上一个
 */
const idList=ref([])
const ThePrevious=(ids)=>{
  idList.value=workIdList
  const index = idList.value.indexOf(ids);
  if(index===0){
    ElMessage.warning("当前为第一个作品")
    return
  }
  if (index !== -1) {
    const prevValue = index > 0 ? idList.value[index - 1] : null; // 前一个值
    workId=prevValue.toString()
    handleSearchDetail(prevValue)

  } else {
  }
}
const next=(ids)=>{
  idList.value=workIdList
  const index = idList.value.indexOf(ids);
  if(index>=idList.value.length){
    ElMessage.warning("当前为最后一个作品")
    return
  }
  if (index !== -1) {
    const nextValue = index < idList.value.length - 1 ? idList.value[index + 1] : null; // 后一个值
    handleSearchDetail(nextValue)
    save()
  } else {
  }
}


</script>


<template>
  <div id="app" style="height: 100%;width: 100%">
    <div class="back">
      <div class="body-text" style="width: 1050px">


        <div style="border: #181818 0px solid">
          <!--    作品名称      -->
          <div style="border: #181818 0px solid;margin-right: 61%;margin-bot1tom: 10px">
            <text style="font-size: 25px;font-weight: bolder;">{{tableData.workName}}</text>
          </div>
          <!--   相关信息     -->
          <div style="display: flex;flex-direction: row;margin-bottom: 20px">
            <text class="msg">所属分类：</text>
            <!--    渲染内容      -->
            <el-text class="msgText" >
              <template v-if="tableData.workTeam==='1'">
                思政科组
              </template>
              <template v-if="tableData.workTeam==='2'">
                公共基础课程组(不含思政)
              </template>
              <template v-if="tableData.workTeam==='3'">
                专业技能课程一组
              </template>
              <template v-if="tableData.workTeam==='4'">
                专业技能课程二组
              </template>
            </el-text>

            <text class="msg">所属课程：</text>
            <!--    渲染内容      -->
            <text class="msgText">车辆维修与制造</text>

            <text class="msg">提交时间：</text>
            <!--    渲染内容      -->
            <text class="msgText">{{tableData.updateTime}}</text>
          </div>
          <!-- 表单部分 -->
          <div style="width: 100%;border: #DCDCDC 1px solid;margin-top: 1px;border-radius: 8px;display: flex;flex-direction: row">
            <!--    表头      -->
            <div style="width: 240px;border-right: #DCDCDC 1px solid;">
              <div style="margin-top: 100px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 695px">
                <text style="margin-left: 150px" class="formText">课堂实录</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 175px" class="formText">教案</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 119px" class="formText">教学实施报告</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 91px" class="formText">专业人才培养方案</text>
              </div>
              <div style="margin-top: 15px;border-bottom:#DCDCDC 1px solid;width: 100%;padding-bottom: 15px">
                <text style="margin-left: 147px" class="formText">课程标准</text>
              </div>
              <div style="margin-top: 15px;width: 100%;padding-bottom: 20px">
                <text style="margin-left: 119px;" class="formText">教程选用说明</text>
              </div>
            </div>
            <!--     表单文件     -->
            <div style="">
              <!--     视频文件       -->
              <div style="border-bottom: #DCDCDC 1px solid;height: 800px;width: 758px">
                <!--     团队1       -->
                <div style="width: 100%;margin-left: 20px;margin-top: 20px">
                  <text class="teamText">团队 1</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div style="flex-direction: column;display: flex">
                      <div style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[0]" style="width: 100%;border-radius: 10px"></video>
                        <button type='button' @click="videoPlay(videosData[0])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                      </div>
                      <div v-if="videosData[1]!==''"  style="margin-top: 10px;width: 180px">
                        <text>{{splitString(videoData[0])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
                <!--     团队2       -->
                <div style="width: 100%;margin-left: 20px;margin-top: 20px">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 2</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div style="flex-direction: column;display: flex">
                      <div style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[1]" style="width: 100%;border-radius: 10px"></video>
                        <button type='button' @click="videoPlay(videosData[1])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                      </div>
                      <div v-if="videosData[1]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitString(videoData[1])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
                <!--     团队3      -->
                <div style="width: 100%;margin-left: 20px;">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 3</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div style="flex-direction: column;display: flex">
                      <div style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[2]" style="width: 100%;border-radius: 10px"></video>
                        <button type='button' @click="videoPlay(videosData[2])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                      </div>
                      <div v-if="videosData[1]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitString(videoData[2])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
                <!--     团队4      -->
                <div style="width: 100%;margin-left: 20px;">
                  <el-divider style="margin-bottom: 10px;margin-top: 10px;width: 720px"/>
                  <text class="teamText">团队 4</text>
                  <!--      视频预览框        -->
                  <div style="margin-top: 10px;display: flex;flex-direction: row">
                    <div style="flex-direction: column;display: flex">
                      <div style="width: 180px;height: 100px;margin-top: 10px;
                    display: flex;justify-content: center;border: #afafaf 2px dashed;border-radius: 10px;padding: 0 0 0 0;
                          align-items: center;position:relative;">
                        <video :src="videosData[3]" style="width: 100%;border-radius: 10px"></video>
                        <button type='button'  @click="videoPlay(videosData[3])" style="background-color: unset;position: absolute;border: 0px;display: flex">
                          <img  style="width: 3em;height: 3em;opacity: 0.7" src="../../assets/play.png">
                        </button>
                      </div>
                      <div v-if="videosData[1]!==''" style="margin-top: 10px;width: 180px">
                        <text>{{splitString(videoData[3])}}</text>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--      教案      -->
              <div class="fileClass" style="height: 54.5px">
                <!--       图标         -->
                <img v-if="docxOrPdf(getFileName(tableData.lessonPlan))" src="../../assets/word.png" class="word">
                <img v-else src="../../assets/pdf.png" class="pdf">

                <!--      文件本体          -->
                <div style="padding-top: 15px">
                  <a :href="splitUrlBefore(tableData.lessonPlan)"  @click="handleClick()">{{getFileName(tableData.lessonPlan)}}</a>
                </div>
                <!--       下载         -->
                <div class="downLoad" @click="downloadFile(getFileUrl(tableData.lessonPlan))">
                  <svg style="width: 2em;height: 2em;color: #D3D3D3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                </div>
              </div>

              <!--      教学实施报告      -->
              <div class="fileClass" style="height: 55.5px">
                <!--       图标         -->
                <img v-if="docxOrPdf(getFileName(tableData.teachingReport))" src="../../assets/word.png" class="word">
                <img v-else src="../../assets/pdf.png" class="pdf">
                <!--      文件本体          -->
                <div style="padding-top: 15px">
                  <a :href="splitUrlBefore(tableData.teachingReport)"  @click="handleClick()">{{getFileName(tableData.teachingReport)}}</a>
                </div>

                <!--       下载         -->
                <div class="downLoad" @click="downloadFile(getFileUrl(tableData.teachingReport))">
                  <svg style="width: 2em;height: 2em;color: #D3D3D3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                </div>
              </div>

              <!--      专业人才培养方案      -->
              <div class="fileClass" style="height: 54.5px">
                <!--       图标         -->
                <img v-if="docxOrPdf(getFileName(tableData.talentDevelopmentPlan))" src="../../assets/word.png" class="word">
                <img v-else src="../../assets/pdf.png" class="pdf">
                <!--      文件本体          -->
                <div style="padding-top: 15px">
                  <a :href="splitUrlBefore(tableData.talentDevelopmentPlan)"  @click="handleClick()">{{getFileName(tableData.talentDevelopmentPlan)}}</a>
                </div>

                <!--       下载         -->
                <div class="downLoad" @click="downloadFile(getFileUrl(tableData.talentDevelopmentPlan))">
                  <svg style="width: 2em;height: 2em;color: #D3D3D3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                </div>
              </div>

              <!--      课程标准      -->
              <div class="fileClass" style="height: 55px;">
                <!--       图标         -->
                <img v-if="docxOrPdf(getFileName(tableData.courseStandard))" src="../../assets/word.png" class="word">
                <img v-else src="../../assets/pdf.png" class="pdf">
                <!--      文件本体          -->
                <div style="padding-top: 15px">
                  <a :href="splitUrlBefore(tableData.courseStandard)"  @click="handleClick()">{{getFileName(tableData.courseStandard)}}</a>
                </div>

                <!--       下载         -->
                <div class="downLoad" @click="downloadFile(getFileUrl(tableData.courseStandard))">
                  <svg style="width: 2em;height: 2em;color: #D3D3D3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                </div>
              </div>

              <!--      教材选用说明      -->
              <div style="display: flex;flex-direction: row">
                <!--       图标         -->
                <img v-if="docxOrPdf(getFileName(tableData.textbookSelectionNote))" src="../../assets/word.png" class="word">
                <img v-else src="../../assets/pdf.png" class="pdf">
                <!--      文件本体          -->
                <div style="padding-top: 15px">
                  <a :href="splitUrlBefore(tableData.textbookSelectionNote)"  @click="handleClick()">{{getFileName(tableData.textbookSelectionNote)}}</a>
                </div>

                <!--       下载         -->
                <div class="downLoad" @click="downloadFile(getFileUrl(tableData.textbookSelectionNote))">
                  <svg style="width: 2em;height: 2em;color: #D3D3D3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" data-v-ea893728=""><path fill="currentColor" d="M160 832h704a32 32 0 1 1 0 64H160a32 32 0 1 1 0-64m384-253.696 236.288-236.352 45.248 45.248L508.8 704 192 387.2l45.248-45.248L480 584.704V128h64z"></path></svg>
                </div>
              </div>

            </div>
            <!--     视频播放       -->
            <el-dialog style="background-color: black;margin-top: 40px" v-model="videoDialogVisible"  :align-center="true" destroy-on-close>
              <template #footer>
                <video ref="vueMiniPlayer" controls autoplay :src="videosrc" style="width: 100%;height: 100%"/>
              </template>
            </el-dialog>

          </div>
        </div>
      </div>
      <!--   下半部分表单       -->
      <div class="body-text" style="margin-top: 20px;width: 1050px">
        <!--     评审     -->
        <div style="margin-right: auto;margin-left: 30px">
          <text style="font-size: large;font-weight: bolder">评审</text>
        </div>
        <!--    表格    -->
        <div style="border: #DCDCDC 1px solid;width: 94%;margin-top: 20px;border-radius: 7px;">
            <!--    表头      -->
            <div style="display: flex;flex-direction: row;height: 60px;width: 100%">
              <div style="width: 250px;border-bottom: #DCDCDC 1px solid;border-right: #DCDCDC 1px solid;
                      display: flex;
                      justify-content: center;
                      align-items: center;">
                <text class="TableHead">一级指标</text>
              </div>
              <div  style="width: 200px;border-bottom: #DCDCDC 1px solid;border-right: #DCDCDC 1px solid;
                    display: flex;
                    justify-content: center;
                    align-items: center;">
                <text class="TableHead">二级指标</text>
              </div>
              <div style="width: 600px;border-bottom: #DCDCDC 1px solid;border-right: #DCDCDC 1px solid;padding-top: 17.5px">
                <text class="TableHead" style="margin-left: 20px;">评审标准</text>
              </div>
              <div style="width: 200px;border-bottom: #DCDCDC 1px solid;border-right: #DCDCDC 1px solid;padding-top: 17.5px">
                <text class="TableHead" style="margin-left: 20px;">各项得分</text>
              </div>
              <div style="width: 200px;border-bottom: #DCDCDC 1px solid;
                    display: flex;
                    justify-content: center;
                    align-items: center;">
                <text class="TableHead">总得分</text>
              </div>
            </div>

            <!--   内容       -->
            <div style="width: 100%;display: flex;flex-direction: row">
              <!--    第一列      -->
              <div style="width: 250px;height: 575px;border-right: #DCDCDC 1px solid;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;">
                <text style="font-size: 14px">评分参考指标</text>
                <text style="font-size: 14px">（100分）</text>
              </div>

              <!--第二列-->
              <div  style="width: 200px;border-right: #DCDCDC 1px solid; ">
                <div style="height: 120px;" class="centerClass">
                  <text class="textText">教师实施报告</text>
                  <text class="textText">（20分）</text>
                </div>
                <div style="height: 130px;border-top: #DCDCDC 1px solid" class="centerClass">
                  <text class="textText">教案</text>
                  <text class="textText">（20分）</text>
                </div>
                <div style="height: 125px;border-top: #DCDCDC 1px solid" class="centerClass">
                  <text class="textText">视频资料</text>
                  <text class="textText">（40分）</text>
                </div>
                <div style="height: 75px;border-top: #DCDCDC 1px solid" class="centerClass">
                  <text class="textText">专业人才培养方案</text>
                  <text class="textText">（8分）</text>
                </div>
                <div style="height: 75px;border-top: #DCDCDC 1px solid" class="centerClass">
                  <text class="textText">课程标准（或实施案）</text>
                  <text class="textText">（8分）</text>
                </div>
                <div style="height: 50px;border-top: #DCDCDC 1px solid" class="centerClass">
                  <text class="textText">教材选用说明</text>
                  <text class="textText">（4分）</text>
                </div>
              </div>

              <!--第三列-->
              <div style="width: 600px;border-right: #DCDCDC 1px solid;">
                <div style="height: 120px;padding-left: 10px;">
                  <text class="textText">1．教学理念先进，教学设计科学合理（4分）</text><br>
                  <text class="textText">2．教学实施以生为本，落实教学设计，教学有创新（4分）</text><br>
                  <text class="textText">3．学生学习效果突出，与教学内容、活动关联性强（4分）</text><br>
                  <text class="textText">4．教学反思深刻，改进举措针对性强、扎实有效（4分）</text><br>
                  <text class="textText">5．报告系统性强，行文规范、逻辑严谨、符合实际（4分）</text>
                </div>
                <div style="height: 130px;border-top: #DCDCDC 1px solid;padding-left: 10px;">
                  <text class="textText">1．教学要素完整，版式规范，详略得当（4分）</text><br>
                  <text class="textText">2．课程思政系统设计，有机融入，培养学生的职业综合素养（4分）</text><br>
                  <text class="textText">3．学情分析精准聚焦，教学目标可评可测（4分）</text><br>
                  <text class="textText">4．教学内容科学严谨，教学策略运用恰当（4分）</text><br>
                  <text class="textText">5．教学评价科学合理，课后反思真实深刻（4分）</text>
                </div>
                <div style="height: 125px;border-top: #DCDCDC 1px solid;padding-left: 10px">
                  <text class="textText">1．坚持立德树人，德技并修（12分）</text><br>
                  <text class="textText">2．凸显职业教育类型特色，体现以生为本（7分）</text><br>
                  <text class="textText">3．课堂教学质量高、效果好，反映师生真实教学状态（7分）</text><br>
                  <text class="textText">4．数字技术与教学方式方法运用恰当，体现深度学习（7分）</text><br>
                  <text class="textText">5．展示教师良好综合素养，展现团队优势（7分）</text>
                </div>
                <div style="height: 75px;border-top: #DCDCDC 1px solid;padding-left: 10px">
                  <text class="textText">1．符合最新文件要求，科学规范制定（3分）</text><br>
                  <text class="textText">2．坚持全面发展，体现培养特色，文本规范严谨（3分）</text><br>
                  <text class="textText">3．体现优化改进，明确多方参与（2分）</text>
                </div>
                <div style="height: 75px;border-top: #DCDCDC 1px solid;padding-left: 10px">
                  <text class="textText">1．落实职业教育国家教学标准（3分）</text><br>
                  <text class="textText">2．条目齐全完备，科学规范（3分）</text><br>
                  <text class="textText">3．具有时代特色，体现（学科）技术领域发展（2分）</text><br>
                </div>
                <div style="height: 50px;border-top: #DCDCDC 1px solid;padding-left: 10px">
                  <text class="textText">1．符合国家关于教材使用相关规定和要求（2分）</text><br>
                  <text class="textText">2．明确选用制度与机制及执行情况（2分）</text>

                </div>
              </div>

              <!--第四列-->
              <div slot-scope="scope" style="width: 200px;border-right: #DCDCDC 1px solid;">
                  <div style="height: 120px;" class="centerClass">
                    <el-input v-model="score1" @input="updateTotalScore" @blur="handleInput1" style="width: 80px"/>
                  </div>
                  <div style="height: 130px;border-top: #DCDCDC 1px solid;" class="centerClass">
                    <el-input v-model="score2" @input="updateTotalScore" @blur="handleInput2" style="width: 80px"/>
                  </div>
                  <div style="height: 125px;border-top: #DCDCDC 1px solid;" class="centerClass">
                    <el-input v-model="score3" @input="updateTotalScore" @blur="handleInput3" style="width: 80px"/>
                  </div>
                  <div style="height: 75px;border-top: #DCDCDC 1px solid;" class="centerClass">
                    <el-input v-model=" score4" @input="updateTotalScore" @blur="handleInput4" style="width: 80px"/>
                  </div>
                  <div style="height: 75px;border-top: #DCDCDC 1px solid;" class="centerClass">
                    <el-input v-model="score5" @input="updateTotalScore" @blur="handleInput5" style="width: 80px"/>
                  </div>
                  <div style="height: 50px;border-top: #DCDCDC 1px solid;" class="centerClass">
                    <el-input v-model="score6" @input="updateTotalScore" @blur="handleInput6" style="width: 80px"/>
                  </div>

              </div >

              <!--第五列-->
              <div style="width: 200px;
                    display: flex;
                    justify-content: center;
                    align-items: center;">
                <el-form :disabled="true">
                  <el-input style="width: 80px"  v-model="totalScore" />
                </el-form>
              </div>

            </div>

        </div>
        <!--   评审意见     -->
        <div style="margin-right: auto;margin-left: 30px;margin-top: 20px">
          <text style="font-size: 14px;font-weight: bolder">评审意见</text>
        </div>
        <!--  输入框      -->
          <el-input
              @input="fixed()"
              style="width: 94.5%;margin-top: 5px"
              v-model="textarea"
              :rows="5"
              type="textarea"
              placeholder="请输入"
          />

        <!--    按钮    -->
        <div style="width: 100%;display: flex;flex-direction: row;margin-top: 40px;">
          <div style="margin-left: 32%">
            <el-button class="bottomClass" style="width: 100px" type="primary" @click="ThePrevious(workId)">上一个</el-button>
            <el-button class="bottomClass" style="width: 100px" type="primary" @click="save">保存</el-button>
            <el-button class="bottomClass"  type="primary" @click="next(workId)">保存并评审下一个</el-button>
          </div>
        </div>


      </div>
      <!-- 底部 -->
      <div class="black-bottom">
        <text class="black-text" style="margin-top: 12px;" >如有使用问题，请联系唐工：17856424152</text>
        <text class="black-text" style="margin-bottom: 12px;" >Copyright ? 2003-2024 zhihuijiaoxue. All rights reserved.</text>
      </div>
    </div>


  </div>
</template>

<style scoped>

.textText{
  font-size: 13px;
}


.centerClass{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottomClass{
  height: 40px;
}

.TableHead{
  font-size: 14px;
  font-weight: bolder;
}


.downLoad{
  margin-right: 20px;
  margin-left: auto;
  margin-top: 12px;
}

.xlsx{
  margin-top: 7px;
  margin-right: 5px;
  margin-left: 10px;
  width: 36px;
  height: 40px;
}


.pdf{
  margin-top: 7px;
  margin-right: 5px;
  margin-left: 10px;
  width: 36px;
  height: 40px;
}

.word{
  width: 40px;
  height: 45px;
  margin-right: 5px;
  margin-top: 5px;
  margin-left: 8px;
}

a:link {color:#000000;}
a:visited {color:#000000;}
a:hover {background-color:white;color: #678afd;}

.fileClass{

  display: flex;
  flex-direction: row;
  height: 55px;
  border-bottom: #DCDCDC 1px solid;
}


.msgText{
  font-weight: bold;
  font-size: 13px;
  margin-right: 30px;
}


.formText{
  font-size: 14px;
  font-weight: bold;

}
.msg {
  font-size: 13px;
  margin-right: 10px;
}



.example-showcase .el-dropdown-link {

  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}


.black-text{

  color:#afafaf;
  font-size: 11px;

}

.black-bottom{
  margin-top: 20px;
  background-color: black;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}




.body-text{
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 2%;
  padding-bottom: 3%;
  margin-left: 15%;
  margin-right: 15%;

}

.back{
  width:100%;
  padding-top: 1.2%;
  background: #ececec;
}


</style>
